<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
}
.fulled {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	background:rgba(240,140,160,0.8);
	display:none;
}
.container {
	width:100%;
	height:600px;
}
.container a {
	text-decoration:none;
	color:#0099FF;
	line-height:100px;
	font-size:60px;
	text-align:center;
	display:block;
}
.fulled .fix-box {
	position:relative;
	margin:10% auto;
	width:500px;
	height:400px;
	background:url(http://www.jq22.com/img/cs/500x300a.png) no-repeat;
	border:4px solid #E63003;
}
.fulled .fix-box .close {
	position:absolute;
	right:10px;
	top:0;
	color:deeppink;
	cursor:pointer;
}
</style>
</head>
<body>
<div class="container"> <a href="javascript:;">弹出层效果</a> </div>
<div class="fulled">
  <div class="fix-box">
    <p class="close">close</p>
  </div>
</div>
 
<script>
$(document).ready(function() {
    $(".container").on("click", function(event) {
        event.preventDefault();
        $(".fulled").fadeIn();
    })
    $(".close").on("click", function(event) {
        if ($(event.target).is(".close") || $(event.target).is(".fix-box")) {
            //alert(123)
            event.preventDefault();
            $(".fulled").hide();
        }
    })
    $(document).keyup(function(event) {
        if (event.which == "27") {
            $(".fulled").fadeOut();
        }
 
    })
})
</script>


</body>
</html>